<template>
	<view class="content" style="width: 100vw;">
		<view class="text-area"><button type="default" @tap="goNext">跳转到404</button></view>
		<test-line></test-line>
		<!--  easycom规范，不用手动引入组件  -->
		<u-avatar></u-avatar>
		<u-button size="medium" :ripple="true" @click="request">点击发起请求测试</u-button>
		<u-loading></u-loading>
		<u-loadmore></u-loadmore>
		<u-icon name="ceshiliucheng" custom-prefix="iconfont" size="120" color="red"></u-icon>
		<!-- 字体图标iconfont 使用  -->
	</view>
</template>

<script>
import apis from '@/common/js/api/uc_apis.js';
import testMixins from '@/common/mixin/mixin-test.js'; /* 混合函数测试, 当页面代码量多时，可用此方式来把代码功能分开，方便维护 */
export default {
	mixins: [testMixins],
	data() {
		return {
			title: 'Hello'
		};
	},
	async onLoad() {
		let isLifeDate = true; // 为true时，修改store的同时也把该值存储到本地localStory里面，利于永久保存数据和刷新页面时，参数不丢失
		this.$u.vuex('userLogin/vuex_test.b', 12, isLifeDate); // 设置userLogin模块store的 vuex_test.b 的值
		this.$u.vuexGet('userLogin/vuex_test.b'); // 获取userLogin模块store的 vuex_test.b 的值
		console.log('获取调用get======', this.$u.vuexGet('userLogin/vuex_test.b')); // 获取store的值
		this.methodsTest1();
	},
	methods: {
		goNext() {
			this.$Router.push({
				name: '404'
			});
		},
		parentTestFn() {
			console.log('parentTestFn====');
		},
		async request(){
			/*  发起请求示例  */
			let res1 = await apis.testRequesst1({
				params1: '123',
				params2: '234',
				params3: '45678'
			});
			uni.showModal({
				title: '请求结果',
				content: JSON.stringify(res1.data) 
			})
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
